<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>{{newsInfo.name}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{newsInfo.title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <h2>{{newsInfo.title}}</h2>
    <p class="newsInfo">
      <span>{{newsInfo.userName}}</span>发布于：
      <span>{{newsInfo.date}}</span>
    </p>
    <div class="cover" v-html="URl">
      <!-- <img :src="'http://localhost:63135/image/'+URl" alt /> -->
    </div>
    <div class="textBody">{{newsInfo.content}}</div>
    <el-input type="textarea" :rows="3" placeholder="评论点什么好呢~" v-model="common"></el-input>
    <el-button type="primary" size="mini" round @click="commit">提交评论</el-button>
    <h3>
      <span style="border-bottom:5px solid #ff5e52; ">评论列表</span>
    </h3>
    <div class="common" v-for="item in commonList" :key="item.commonId">
      <p>
        <span>{{item.userName}}</span>在
        <span>{{item.time}}</span>说：
        <span>{{item.commonb}}</span>
      </p>
      <hr size="1px" color="#eeeeee" />
    </div>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      common: '',
      // 新闻详细信息
      newsInfo: {},
      // 评论列表
      commonList: [],
      URl: ''

    }
  },
  created () {
    this.getNewsInfo()
    this.getCommonList()
  },
  methods: {
    async getNewsInfo () {
      const { data: res } = await this.$http.get('api/newsId', {
        params: { newsId: this.$route.query.newsId }
      })
      this.newsInfo = res.Table[0]
      // console.log(res.Table[0].cover)

      this.URl = `<img src="http://localhost:63135/image/${res.Table[0].cover}" style="width:100%;" />`
      console.log(this.URl)
    },
    // 获取评论列表
    async getCommonList () {
      const { data: res } = await this.$http.get('api/commonByNewsId', {
        params: { newsId: this.$route.query.newsId }
      })
      this.commonList = res.Table
      console.log(res)
    },
    // 提交评论
    async commit () {
      // eslint-disable-next-line no-use-before-define
      if (window.sessionStorage.getItem('token') === null) { return this.$message.error('请先登陆') }
      var date = new Date()
      var y = date.getFullYear() // 返回当前年份
      var m = date.getMonth() + 1 // 返回当前月份  (0~11)     0 代表1月
      var d = date.getDate() // 返回当前是几号（1~31）
      var DATE = y + '-' + m + '-' + d
      // 将数据发送到后台
      var params = new URLSearchParams()
      params.append('commiter', window.sessionStorage.getItem('token'))
      params.append('commonb', this.common)
      params.append('time', DATE)
      params.append('newsId', this.$route.query.newsId)
      params.append('cstate', '-1')

      const { data: res } = await this.$http({
        method: 'post',
        url: 'api/common',
        data: params,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      })
      console.log(res)

      console.log(window.sessionStorage.getItem('token'))
      if (res.status !== 200) return this.$message.error('评论失败')
      this.$message.success('评论成功，等待管理员审核')
      this.common = ''

      // console.log(res)
    }
  },
  watch: {
    // 同一个页面，当从编辑页面跳到增加页面时，重新刷新页面
    $route (to, from) { // 监听路由是否变化
      // this.getNewsInfo()
      // this.getCommonList()
      this.$router.go(0)
    }
  }
}
</script>
<style lang="less" scoped>
.common {
  font-size: 15px;
  color: #666666;
}
.newsInfo {
  font-size: 12px;
  color: #666666;
}
.cover {
  width: 100%;
  img {
    width: 100%;
  }
}
.textBody {
  word-wrap: break-word;
  margin: 50px 0;
  color: #666666;
}
.el-button {
  float: right;
}
h3 {
  margin: 50px 0;
}
</style>
